<template>
  <!-- 数据集生成 -->
  <div style="padding: 10px;">
    <a-row :gutter="[8, 8]">
      <a-col :span="10">
        <a-row :gutter="[24, 4]">
          <a-col :span="12">
            <a-card hoverable title="LSTM模型">
              <p class="card-fcc">均方差<span class="card-fcx-value">6.2</span>
              </p>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card hoverable title="DQN模型" >
              <p class="card-fcc">均方差<span class="card-fcx-value">6.2</span>
              </p>
            </a-card>
          </a-col> 
        </a-row>
        <a-row :gutter="[24, 4]">
          <a-col :span="12">
            <a-card hoverable title="DNN模型" >
                <p class="card-fcc">均方差<span class="card-fcx-value">6.2</span>
                </p>
              </a-card> 
          </a-col>
          <a-col :span="12">
            <a-card hoverable title="CNN模型" >
                <p class="card-fcc">均方差<span class="card-fcx-value">6.2</span>
                </p>
              </a-card>  
          </a-col>
        </a-row>
        <a-row :gutter="[24, 4]">
          <a-col :span="12">
            <a-card hoverable title="RNN模型" >
                <p class="card-fcc">均方差<span class="card-fcx-value">6.2</span>
                </p>
              </a-card>   
          </a-col>
          <a-col :span="12">
            
          </a-col>
        </a-row> 
      </a-col>
      <a-col :span="14">
        <a-card title="均方差与实际值对比">
          <bar title="" :height="'346'"  :dataSource="bar.dataSource" />
        </a-card>
      </a-col>
    </a-row>

    <a-card title="预测与实际值对比" style="margin-top: 10px;">
        <line-chart-multid title="" :height="'300'" :dataSource="lineChartMultid.dataSource" :fields="lineChartMultid.fields"/>
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import '@/assets/less/TableExpand.less'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
export default {
  name: 'DataSetBuild',
  mixins: [JeecgListMixin],
  components: {
    Bar,
    LineChartMultid
  },
  data() {
    return {
      description: '数据集生成',
      bar: {
        dataSource: [
          {
            x: 'LSTM模型',
            y: 18.9
          },
          {
            x: 'DQN模型',
            y: 12.4
          },
          {
            x: 'DNN模型',
            y: 6.4
          },
          {
            x: 'CNN模型',
            y: 6.2
          },
          {
            x: 'RNN模型',
            y: 11.4
          },
        ]
      },
      lineChartMultid:{dataSource:[
          { type: 'Jan', LSTM: 7.0, DQN: 3.9, DNN: 3.9 ,CNN:1, RNN:8},
          { type: 'Feb', LSTM: 6.9, DQN: 4.2 , DNN: 3.9,CNN:1,RNN:8},
          { type: 'Mar', LSTM: 9.5, DQN: 5.7 , DNN: 3.9,CNN:1,RNN:8},
          { type: 'Apr', LSTM: 14.5, DQN: 8.5, DNN: 3.9,CNN:4,RNN:8 },
          { type: 'May', LSTM: 18.4, DQN: 11.9, DNN: 3.9,CNN:6,RNN:8 },
          { type: 'Jun', LSTM: 21.5, DQN: 15.2, DNN: 3.9,CNN:1,RNN:8 },
          { type: 'Jul', LSTM: 25.2, DQN: 17.0, DNN: 3.9 ,CNN:1,RNN:8},
          { type: 'Aug', LSTM: 26.5, DQN: 16.6 , DNN: 3.9,CNN:15,RNN:8},
          { type: 'Sep', LSTM: 23.3, DQN: 14.2, DNN: 3.9 ,CNN:1,RNN:8},
          { type: 'Oct', LSTM: 18.3, DQN: 10.3, DNN: 3.9 ,CNN:16,RNN:8},
          { type: 'Nov', LSTM: 13.9, DQN: 6.6, DNN: 3.9 ,CNN:1,RNN:8},
          { type: 'Dec', LSTM: 9.6, DQN: 4.8, DNN: 3.9,CNN:1,RNN:8 }
        ],
        fields:['LSTM', 'DQN','DNN','CNN','RNN']
    } 
    }
  },
  created() {
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    initDictConfig() {},
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'formulaName', text: '公式名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'formulaContent', text: '内容', dictCode: '' })
      fieldList.push({ type: 'date', value: 'modifyDate', text: '修改日期' })
      fieldList.push({ type: 'string', value: 'remark', text: '备注', dictCode: '' })
      fieldList.push({ type: 'int', value: 'seqNo', text: '序号，用于公式排序', dictCode: '' })
      fieldList.push({ type: 'string', value: 'userId', text: '创建人', dictCode: '' })
      this.superFieldList = fieldList
    },
    handleAdd() {
      this.$router.push({ path: '/userFormula/add/0' })
    },
    handleEdit: function (record) {
      this.$router.push({ path: `/userFormula/add/${record.id}` })
    },
  },
}
</script>
<style scoped> 
.card-fcc{
    font-size: 24px; 
    line-height: 36px;
    padding-left: 20px;
}
.card-fcx-value{
    font-size: 36px; margin-right: 20px;float:right;
}
</style>